<script setup>
import XtxEmpty from "../../components/XtxEmpty.vue";
import CacheImage from "../../components/CacheImage.vue";
import {useGoldDetail} from "./use_gold_detail";

const {
  paging,
  dataList,
  my_gold_coin,
  tabIndex,
  okBack,
  queryList,
  onTabChange
} = useGoldDetail()
</script>
<template>
  <z-paging ref="paging" v-model="dataList"
            auto-show-back-to-top
            @query="queryList"
            :refresher-complete-delay="600">
    <template #refresher>
      <!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
      <view style="display: flex;justify-content: center;align-items: center;padding-top: 120rpx;">
        <cache-image src="https://lsz.lszbg.com/imgs/logo_loading.gif" :style="{height:'110rpx',width:'110rpx',margin:'auto'}">
        </cache-image>
      </view>
    </template>
    <template #top>
      <view class="return_title">
        <u-status-bar></u-status-bar>
        <view class="content" @click="okBack">
          <u-icon name="arrow-left" color="#ffffff" size="20"></u-icon>
          <text class="title">金币明细</text>
        </view>
      </view>
      <view class="topContent">
        <view class="price_btn">
          <view class="l_price">当前金币：
            <text>{{ my_gold_coin }}</text>
          </view>
          <navigator open-type="navigateBack" class="zq_btn">去赚金币</navigator>
        </view>
        <view class="two_tab">
          <!-- #ffe8d8 -->
          <text :class="tabIndex === 0? 'cur':''" @tap="onTabChange(0)">金币收入</text>
          <text :class="tabIndex === 1? 'cur':''" @tap="onTabChange(1)">兑换记录</text>
        </view>
      </view>
    </template>

    <view class="video_list">
      <view class="c_small" v-for="(item, index) in dataList" :key="index">
        <view class="l_infor" v-if="tabIndex === 0">
          <view class="name">{{ item.title }}</view>
          <view class="time">{{ item.create_time }}</view>
        </view>
        <view class="num" v-if="tabIndex === 0">{{ item.gold_coin > 0 ? '+' + item.gold_coin : item.gold_coin }}</view>

        <view class="l_infor" v-if="tabIndex === 1">
          <view class="name">{{ item.pay_type }}</view>
          <view class="time">{{ item.start_time }}至{{ item.end_time }}</view>
        </view>
        <view class="num" v-if="tabIndex === 1">{{ item.day_num }}天</view>
      </view>
    </view>
    <template #empty>
      <XtxEmpty/>
    </template>
    <template #loading>
      <view style="display: flex;flex-direction: column;align-items: center;padding-top: 120rpx;">
        <image style="width: 110rpx;height: 110rpx;" src="https://lsz.lszbg.com/imgs/logo_loading.gif"></image>
        <view
            style="font-size: 38rpx;font-weight: 600;color: #F97632;text-align: center;box-sizing: border-box;padding: 40rpx 0;">
          领食周边购
        </view>
      </view>
    </template>
    <!-- 自定义的没有更多数据view -->
    <template #loadingMoreNoMore>
      <view style="font-size: 26rpx;color: #b4b4b4;text-align: center;box-sizing: border-box;padding: 40rpx 0;">
        没有更多数据
      </view>
    </template>
  </z-paging>
</template>
<style lang="scss">
page {
  background: url('https://lsz.lszbg.com/imgs/images/gold_bg.png') no-repeat -3rpx -10rpx;
  background-size: cover;
  height: 100%;
  width: 102%;
}

</style>
<style lang="scss" scoped>
.return_title {
  width: 100%;
  padding: 20rpx 30rpx 16rpx;
  color: white;
  background-size: cover;

  .content {
    display: flex;
    align-items: center;
  }

  .title {
    margin-right: 38rpx;
    font-size: 36rpx;
    font-weight: normal;
    flex: 1;
    text-align: center;
  }
}

.topContent {
  padding: 30rpx 0 6rpx;
  //background-image: linear-gradient(90deg, #F7BE6F, #F5A666);
}

.price_btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 30rpx 30rpx;

  .l_price {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 3px 6px rgba(252, 118, 74, 0.5);
    -webkit-background-clip: text;

    text {
      font-size: 40rpx;
    }
  }

  .zq_btn {
    width: 120rpx;
    height: 50rpx;
    background-color: #FFE098;
    border-radius: 6rpx;
    font-size: 24rpx;
    color: #FE4D33;
    line-height: 50rpx;
    text-align: center;
  }
}

.two_tab {
  width: 93%;
  margin: 0 auto -10rpx;
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  box-sizing: border-box;
  opacity: 0.8;
  padding: 30rpx 0;
  border-radius: 10rpx 10rpx 0 0;

  text {
    display: inline-block;
    width: 50%;
    text-align: center;
    font-size: 30rpx;
    color: #666;
    position: relative;

    &.cur {
      color: #FE4D33;

      &:after {
        content: '';
        display: inline-block;
        width: 120rpx;
        height: 8rpx;
        background: linear-gradient(90deg, #FC784B 0%, #FE9C54 100%);
        border-radius: 10rpx;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -30rpx;
        margin: auto;
      }
    }
  }
}

.video_list {
  width: 93%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0 0 10rpx 10rpx;
  box-sizing: border-box;
  flex: 1;
}

.c_small {
  box-sizing: border-box;
  padding: 30rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 93%;
  margin: 0 auto;
  border-bottom: 1px solid #eee;

  .l_infor {
    .name {
      font-size: 28rpx;
      color: #333;
    }

    .time {
      font-size: 24rpx;
      color: #888;
      margin-top: 10rpx;
    }
  }

  .num {
    font-size: 30rpx;
    color: #FC754A;
    font-weight: bold;
  }
}

.more_text {
  font-size: 28rpx;
  text-align: center;
  color: #bbb;
  width: 100%;
  margin-top: 50rpx;
}

//}
//}
</style>
